import React, { FC, useContext } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { Tabs } from 'antd-mobile';
import { OrderContext, useOrderExhibitionList } from '@/pages/MyOrder/MyOrderContext';
import { useOptionsRender } from '@/pages/MyOrder/MyOrderContent/MyOrderContentOption';
export interface IProps extends ICompProps {}
OrderTabs.defaultProps = {} as Partial<IProps>;
function OrderTabs(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('OrderTabs', className);
    const { activeIndex, setActiveIndex, tabItems, swiperRef } = useContext(OrderContext);
    return (
        <RootView className={localClassName} style={style}>
            <Tabs
                className="tabs"
                activeLineMode="fixed"
                style={{
                    '--fixed-active-line-width': '20px',
                    '--active-line-color': '#FF8828',
                    '--active-line-height': '5px',
                    '--active-title-color': '#333333',
                    '--title-font-size': '14px',
                }}
                activeKey={tabItems[activeIndex].key}
                onChange={(key) => {
                    const index = tabItems.findIndex((item) => item.key === key);
                    setActiveIndex(index);
                    swiperRef.current?.swipeTo(index);
                }}>
                {tabItems.map((item) => (
                    <Tabs.Tab title={item.title} key={item.key} />
                ))}
            </Tabs>
        </RootView>
    );
}
export default React.memo(OrderTabs as FC<IProps>);
const RootView = styled(View)`
    &.OrderTabs {
        padding-top: 20px;
        .tabs {
            font-size: 32px;
            font-weight: 400;
            color: #808a9d;
            .adm-tabs-header {
                border-bottom: none;
            }
        }
    }
`;
